"use strict";
define(['Ember', 'ace'], function (Em, ace) {

    var VueComponent = {
        template: '#tpl-editor',
        props: {source: String},
        data() {
            return {
                currentRow: 0
            }
        },

        methods: {
            getContent() {
                return this.editor.getSession().getValue();
            },
            setContent(content) {
                this.editor.getSession().setValue(content);
            }
        },

        mounted() {
            this.editor = ace.edit(this.$el);
            this.editor.session.setUseWorker(true);
            this.editor.setTheme("ace/theme/tomorrow_night");
            this.editor.session.setMode("ace/mode/javascript");
            this.editor.on('change', function () {
                //
            });
            this.editor.selection.on('changeCursor', function (event) {
                //this.currentRow = this.editor.selection.getCursor().row;
            });

            if(this.source !== '') {
                var text = document.querySelector(this.source).textContent;
                this.setContent(text);
            }
        }
    };

    var JSEditorComponent = Em.Component.extend({
        tagName: 'pre',
        didInsertElement: function () {
            var _this = this;
            this.set('editor', ace.edit(this.get('element')));
            var editor = this.get('editor');
            editor.session.setUseWorker(true);
            editor.setTheme("ace/theme/tomorrow_night");
            editor.session.setMode("ace/mode/javascript");
            editor.on('change', function () {
                Em.run.once(_this, _this.notifyPropertyChange, 'content');
            });
            editor.selection.on('changeCursor', function (event) {
                _this.set('currentRow', editor.selection.getCursor().row);
            });
            if (this.get('preset')) {
                this.set('content', this.get('preset'));
                this.set('preset', null);
            }
        },
        content: function (key, val) {
            if (!this.get('editor')) {
                this.set('preset', val);
                return val;
            }
            if (arguments.length == 1) {
                return this.get('editor').getSession().getValue();
            } else {
                this.get('editor').getSession().setValue(val);
                return val;
            }
        }.property(),
        annotations: function (key, val) {
            if (!this.get('editor'))
                return val;
            if (arguments.length == 1)
                return this.get('editor').getSession().getAnnotations();
            else {
                this.get('editor').getSession().setAnnotations(val);
                if (val.length)
                    this.get('editor').gotoLine(val[0].row);
                return val;
            }
        }.property()
    });

    return {JSEditorComponent: JSEditorComponent, VueComponent:VueComponent};
});
